Material buttons trigger an ink reaction on press. They may display text, imagery, or both. Flat buttons and raised buttons are the most commonly used types.
Additional button types include:
Flat buttons are text-only buttons.
They may be used in dialogs, toolbars, or inline.
They do not lift, but fill with color on press.
Raised buttons are rectangular-shaped buttons.
They may be used inline.
They lift and display ink reactions on press.
Flat buttons: 0dp
Raised buttons: 2dp
The floating action button should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop.
Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.
Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.
Checkboxes allow the user to select multiple options from a set.
If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.
If you have a single option, avoid using a checkbox and use an on/off switch instead.
Light theme for check boxes
Dark theme for check box
On: #009788, Opacity 100%
Off: #555, Opacity 100%
Disabled: #000000, Opacity 25%
hover |
focused |
pressed |
disabled |
|
On |
|
|
|
|
Off |
|
|
|
|
Light theme for check box in hover, focused, pressed, disabled states.
On: #009788, Opacity 100%
Off: #1978CC, Opacity 100%
Disabled: #FFFFFF, Opacity 25%
hover |
focused |
pressed |
disabled |
|
On |
|
|
|
|
Off |
|
|
|
|
Dark theme for check box in hover, focused, pressed, disabled states.